import React, {Component, lazy} from 'react'
import {Route} from 'react-router-dom'
import { TabBar } from 'antd-mobile'

import './index.css'

import Index from '../Index'
const HouseList = lazy(() => import('../HouseList'))
const News = lazy(() => import('../News'))
const Profile = lazy(() => import('../Profile'))

// 菜单栏相关数据
const tabBars = [
  { title: '首页', icon: 'icon-ind', path: '/home' },
  { title: '找房', icon: 'icon-findHouse', path: '/home/houselist' },
  { title: '资讯', icon: 'icon-infom', path: '/home/news' },
  { title: '我的', icon: 'icon-my', path: '/home/profile' }
]
export default class Home extends Component {
  constructor(props) {
    super(props)
    this.state = {
      // 当前选中<TabBar.Item />>项的selected属性值,根据url动态显示选中高亮菜单项
      selectedTab: this.props.location.pathname,
      // 是否隐藏底部菜单栏TabBar
      // hidden: false,
      // 是否全屏,默认全屏，全屏时菜单栏在页面底部
      // fullScreen: true,
    }
  }
  // renderContent(pageText) {
  //   return (
  //     <div style={{ backgroundColor: 'white', height: '100%', textAlign: 'center' }}>
  //       <div style={{ paddingTop: 60 }}>Clicked “{pageText}” tab， show “{pageText}” information</div>
  //       <a style={{ display: 'block', marginTop: 40, marginBottom: 20, color: '#108ee9' }}
  //         href="/"
  //         onClick={(e) => {
  //           e.preventDefault();
  //           this.setState({
  //             hidden: !this.state.hidden,
  //           });
  //         }}
  //       >
  //         Click to show/hide tab-bar
  //       </a>
  //       <a style={{ display: 'block', marginBottom: 600, color: '#108ee9' }}
  //       href="/"
  //         onClick={(e) => {
  //           e.preventDefault();
  //           this.setState({
  //             fullScreen: !this.state.fullScreen,
  //           });
  //         }}
  //       >
  //         Click to switch fullscreen
  //       </a>
  //     </div>
  //   );
  // }
  componentDidUpdate(preState) {
    // console.log(this.props, preState);
    // url一变化就让对应菜单高亮 
    if(preState.location.pathname !== this.props.location.pathname)
      this.setState({
        selectedTab: this.props.location.pathname
      })
  }
  render() {
    return (
      <div className="home">
        {/* 默认展示home的index组件 */}
        <Route exact path="/home" component={Index}></Route>
        <Route path="/home/houselist" component={HouseList}></Route>
        <Route path="/home/news" component={News}></Route>
        <Route path="/home/profile" component={Profile}></Route>
        <div style={{ position: 'fixed', height: '50px', width: '100%', bottom: 0 }}>
          <TabBar
            // 未选中的菜单字体颜色
            unselectedTintColor="rgb(136, 136, 136)"
            // 选中的菜单字体颜色
            tintColor="rgb(33, 185, 122)"
            // 菜单栏背景色，默认白色
            // barTintColor="green"
            // 是否隐藏底部菜单栏TabBar
            hidden={this.state.hidden}
          >
            {
              tabBars.map(item => {
                return (
                  <TabBar.Item
                    // 菜单文本
                    title={item.title}
                    key={item.icon}
                    // 未选中时的图标
                    icon={
                      <i className={`iconfont ${item.icon}`}></i>
                      // <div
                      // style={{
                      //   width: '22px',
                      //   height: '22px',
                      //   background: 'url(https://zos.alipayobjects.com/rmsportal/sifuoDUQdAFKAVcFGROC.svg) center center /  21px 21px no-repeat'
                      // }}
                      // />
                    }
                    // 选中时的图标
                    selectedIcon={
                      <i className={`iconfont ${item.icon}`}></i>
                      // <div style={{
                      //   width: '22px',
                      //   height: '22px',
                      //   background: 'url(https://zos.alipayobjects.com/rmsportal/iSrlOTqrKddqbOmlvUfq.svg) center center /  21px 21px no-repeat'
                      // }}
                      // />
                    }
                    // 是否选中
                    selected={this.state.selectedTab === item.path}
                    // 徽标数
                    // badge={1}
                    // 设置选中时的selectedTab值
                    onPress={() => {
                      // 当匹配到/home时可以拿到路由信息
                      // console.log(this.props);
                      this.props.history.push(item.path)
                      // this.setState({
                      //   selectedTab: item.path,
                      // });
                    }}
                  // 自定义属性
                  // data-seed="logId"
                  >
                    {/* {this.renderContent('Life')} */}
                  </TabBar.Item>
                )
              })
            }

          </TabBar>
        </div>
      </div>
      
      // <div>
      //   <div>
      //     <Route path="/home/index" component={Index}></Route>
      //     <Route path="/home/houselist" component={HouseList}></Route>
      //     <Route path="/home/news" component={News}></Route>
      //     <Route path="/home/profile" component={Profile}></Route>
      //   </div>
      //   <ul>
      //     <li><Link to="/home/index">首页</Link></li>
      //     <li><Link to="/home/homelist">找房</Link></li>
      //     <li><Link to="/home/news">资讯</Link></li>
      //     <li><Link to="/home/profile">我的</Link></li>
      //   </ul>
      // </div>
    )
  }
}